/* stylelint-disable length-zero-no-unit */
.chart_Contentbox {
  height: calc(100vh - 100px);
}

.main_box {
  display: flex;
  height: 80%;

  .users_list_left {
    background-color: white;
    width: 15%;

    ul {
      padding: 0px;

      li {
        padding: 0px 10px;
        box-sizing: border-box;
        margin: 5px 0px;

        .users_item_img_box {
          width: 20%;
          margin-right: 10px;
        }

        display: flex;
        align-items: center;
        justify-content: space-between;

        p {
          margin-bottom: 0px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
        }

        .user_name {
          color: black;
        }

        .user_cont {
          color: rgb(163, 160, 160);
        }

        .chart_time {
          color: rgb(163, 160, 160);
          margin-left: 10px;
        }
      }
    }

    img {
      width: 100%;
      border-radius: .1333rem;
    }
  }

  .users_chart_msg_right {
    h3 {
      font-size: 20px;
      padding-left: 10px;
    }

    .chart_content {
      height: 90%;

      .users_chart_msg_right_top {
        padding-top: 10px;
        box-sizing: border-box;
        border-top: 1px solid #ececec;
        height: 80%;

        >div {
          height: 100%;
          overflow: auto;
        }
        >div::-webkit-scrollbar {
          display: none;
        }
        .text-align-right {
          text-align: right;

          .chart_item {
            justify-content: flex-end;

            .color_fff {
              margin-right: 15px;
              background-color: greenyellow;
            }
          }
        }

        ul {
          li {
            .chart_item {
              display: flex;

              .item_imgbox {
                box-sizing: border-box;

                img {
                  width: 40px;
                  margin-right: 15px;
                }
              }

              p {
                margin-bottom: 5px;
              }

              .color_fff {
                background-color: #fff;
                padding: 10px;
                box-sizing: border-box;
              }
            }
          }
        }
      }

      .users_chart_msg_right_bottom {
        padding-top: 10px;
        padding-left: 20px;
        box-sizing: border-box;
        border-top: 1px solid #ececec;
        height: 20%;

        textarea {
          width: 80%;
          height: 80%;
          border: none;
          outline: none;
          // background-color: #ebebeb;
          background-color: #f5f5f5;
        }

        .send_btn {
          text-align: right;
          margin-right: 30px;

          span {
            padding: 5px 10px;
            box-sizing: border-box;
            background-color: #e9e9e9;
            color: #07c160;
          }
        }
      }
    }

    width: 70%;
    background-color: #f5f5f5;
  }
}
